<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击获取省份列表</button>
</body>
<script>
    let btn=document.querySelector("button");
    btn.onclick=function(){
        // alert('点击了按钮')
        // 1.创建对象
        let xhr=new XMLHttpRequest();
        //2.建立连接
        xhr.open('get','http://ajax-api.itheima.net/api/province');
        //3.发送请求
        //发送请求中可以携带啊数据
        //注意：数据发送前，需要转换数据，指定请求头数据类型（put，post）

        //数据类型转换
        // JSON => 对象
        //JSON.parse(要转换的json数据)
        // 对象 => JSON
        // JSON.stringify(要转换的数据)
        xhr.send();
        //4.监听请求状态
        //状态值只有0，1，2，3，4种状态
        xhr.onreadystatechange =function(){
            if(xhr.readyState == 4){
                //5.请求完成，获取服务器返回数据
                console.log(xhr.responseText);
                //转换后的数据（JSON => 对象）
                console.log(JSON.parse(xhr.responseText));

                console.log(JSON.stringify(xhr.responseText));

            }
        }
    }
</script>
</html>